import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
const blankIframe: any = { contentWindow: {} }
@Component({})
export default class PrintDialog extends Vue {
  @Prop({ default: '' }) private visible!: boolean
  @Prop({ default: '' }) private url!: string
  @Prop({ default: '' }) private title!: string
  @Prop({ default: '' }) private printHtml!: string

  protected render(h: any) {
    return (
      <div>
        <el-dialog
          title={this.title}
          width={'838px'}
          visible={this.visible}
          {...{
            on: {
              'update:visible': this.visibleChange,
            },
          }}
        >
          {this.visible && (
            <iframe
              ref="printHtml"
              src={this.printHtml}
              width="800"
              height="1130"
            />
          )}
          <div slot="footer">
            <el-button
              onClick={() => {
                this.$emit('visibleChange', false)
              }}
            >
              取消
            </el-button>
            <el-button type="primary" onClick={this.print}>
              打印
            </el-button>
          </div>
        </el-dialog>
      </div>
    )
  }
  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }

  private print() {
    const printHtml = this.printHtml
      ? (this.$refs.printHtml as HTMLIFrameElement)
      : blankIframe
    printHtml.contentWindow.focus()
    printHtml.contentWindow.print()
  }
}
